<script lang="ts" setup>
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, onMounted, computed, nextTick, defineAsyncComponent } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import type { TableInstance } from 'element-plus'
  import { ArrowDown, Edit } from '@element-plus/icons-vue'
  import { ElMessageBox } from 'element-plus'
  import {
    workLevelPageSelect,
    // getOrderListTableTitleField,
    getOrderListTableField,
    getOrderLastLog,
    axiosCancel,
    finishOrderMultipleCheck,
  } from '@/api/order'
  import { empPageSelecct } from '@/api/organize'
  import debounce from 'lodash/debounce'
  import { GetOrderListParam, OrderListTableField, Order } from './types'
  import Filter from './components/filter.vue'
  import OrderListStatusTabs from './components/order-list-status-tabs.vue'
  import routeComponentName from '@/config/route-component-name'
  import { HMessage, HMessageBox } from '@/components/common/message'
  // import UpdateOrderCustomerInfoModal from '@/components/pages/order/detail/pages/body/user-info/UpdateCustomerInfoModal.vue'
  import { useUserStore } from '@/store/modules/user'
  import useOrderListService from '@/services/module/order/useOrderListService'

  const AssignNetwork = defineAsyncComponent(
    () => import('@/components/pages/order/list/assign-network/AssignNetwork.vue'),
  )
  const UpdateNetwork = defineAsyncComponent(
    () => import('@/components/pages/order/list/update-network/UpdateNetwork.vue'),
  )
  const AssignCustomerService = defineAsyncComponent(
    () => import('@/components/pages/order/list/assign-customer-service/AssignCustomerService.vue'),
  )
  const ServiceProcess = defineAsyncComponent(
    () => import('@/components/pages/order/list/service-process/ServiceProcess.vue'),
  )
  const Reminder = defineAsyncComponent(
    () => import('@/components/pages/order/list/reminder/Reminder.vue'),
  )
  const TimeoutTip = defineAsyncComponent(
    () => import('@/components/pages/order/list/timeout-tip/TimeoutTip.vue'),
  )
  const FinishOrder = defineAsyncComponent(
    () => import('@/components/pages/order/list/finish-order/FinishOrder.vue'),
  )
  const OrderExport = defineAsyncComponent(
    () => import('@/components/pages/order/list/export/order-export.vue'),
  )
  const Archive = defineAsyncComponent(
    () => import('@/components/pages/order/list/archive/Archive.vue'),
  )
  const CancelOrder = defineAsyncComponent(
    () => import('@/components/pages/order/list/cancel-order/CancelOrder.vue'),
  )
  const TableColumnSet = defineAsyncComponent(
    () => import('@/components/pages/order/common/table-column-set/TableColumnSet.vue'),
  )
  const CheckStatementOrder = defineAsyncComponent(
    () =>
      import(
        '@/views/order/detail/components/btn-group/check-setttlement-order/CheckStatementOrder.vue'
      ),
  )
  const UpdateOrderInfoModal = defineAsyncComponent(
    () => import('@/views/order/detail/components/order-info/UpdateOrderInfoModal.vue'),
  )

  const {
    orderList,
    orderListTotal,
    getOrderListParam,
    getOrderListLoading,
    getOrderList,
    resetGetOrderListParam,
  } = useOrderListService()

  defineOptions({
    name: routeComponentName.order.orderList,
  })

  const selectedOrderList = ref<Array<Order>>([])
  const userStore = useUserStore()
  const route = useRoute()
  const filterInstance = ref<InstanceType<typeof Filter> | null>(null)
  const statusQtyTabInstance = ref<InstanceType<typeof OrderListStatusTabs> | null>(null)
  const dialogStates = ref({
    export: false,
    assignNetwork: false,
    updateNetwork: false,
    assignCustomerService: false,
    serviceProcess: false,
    reminder: false,
    timeoutTip: false,
    finishOrder: false,
    archive: false,
    cancel: false,
    tableColumnSet: false,
    updateOrder: false,
  })

  /**
   * 公司地址
   * 用于用户只选中一张工单然后分派网点然后筛选出该地址内的网点
   */
  const userAddress = ref({
    province: '',
    city: '',
    area: '',
    town: '',
    address: '',
  })

  /**
   * 列表状态筛选
   * 0 - 全部工单
   * 1 - 待派单
   * 2 - 待网点处理（0 - 全部，1 - 网点未接单，2 - 网点未派单，3 - 工程师未接单）
   * 3 - 处理中（0 - 全部，1 - 未拨打电话，2 - 未预约，3 - 未签到，4 - 费用待审核，5 - 物料待审核）
   * 1001 - 结单审核
   * 4 - 已完成
   * 5 - 已取消
   */
  const listFilterStatus = ref(0)

  /**
   * 列表筛选子状态
   * 2 - 待网点处理（0 - 全部，1 - 网点未接单，2 - 网点未派单，3 - 工程师未接单）
   * 3 - 处理中（0 - 全部，1 - 未拨打电话，2 - 未预约，3 - 未签到，4 - 费用待审核，5 - 物料待审核）
   */
  const childStatus = ref(0)
  const router = useRouter()
  const getServicePersonOptionsLoading = ref(false)
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)
  const tableInstance = ref<TableInstance | null>(null)
  // const tableHeaderCustomField = ref<Array<OrderListTableHeaderCustomField>>([])
  const getOrderModuleOptionsKeyword = ref('')
  const getOrderGradeOptionsKeyword = ref('')
  // const getNetworkOptionsKeyword = ref('')
  const getServicePersonOptionsKeyword = ref('')

  // 分派网点状态：1-已派单，0-未派单，传空值则查询所有
  const assignNetworkStatus = ref<0 | 1 | ''>('')

  // 服务时长类型：1-小时，2-天
  const serviceTimeRangeType = ref<1 | 2 | ''>('')
  // const updateOrderCustomerModalVisible = ref(false)
  const currentUpdateOrderId = ref('')
  // const currentUpdateCustomerOrderId = ref('')
  const sortColumn = [
    'reservationDate',
    'createTime',
    'orderGoodsQty',
    'totalServiceTime',
    'archivedTime',
    'orderCancelTime',
    'orderFinishTime',
    'updateTime',
  ]
  const getOrderListTableHeaderFieldLoading = ref(false)
  // const getOrderListTableHeaderCustomFieldLoading = ref(false)
  const getOrderQtyStatisticsLoading = ref(false)
  const loading = computed(() => {
    return (
      getOrderListTableHeaderFieldLoading.value ||
      getOrderListLoading.value ||
      getOrderQtyStatisticsLoading.value
    )
  })
  // const customerServiceOptionsPopoverVisible = ref(false)

  // const onCustomerServiceFilterClick = () => {
  //   customerServiceOptionsPopoverVisible.value = !customerServiceOptionsPopoverVisible.value
  //   if (customerServiceOptionsPopoverVisible.value) {
  //     getworkTeamPageSelect('')
  //   }
  // }

  /**
   * 表格合并行的回调函数
   * @param param - 参数
   */
  // const getSummaries = (param: {
  //   columns: TableColumnCtx<OrderListItem>[]
  //   data: OrderListItem[]
  // }) => {
  //   const result: string[] = []
  //   param.columns.forEach((item, index) => {
  //     if (item.property === 'materialFee') {
  //       let total = 0
  //       param.data.forEach((order) => {
  //         total += Number(order.materialFee) || 0
  //       })
  //       result[index] = `￥${total.toFixed(2)}`
  //     }

  //     if (item.property === 'serviceFee') {
  //       let total = 0
  //       param.data.forEach((order) => {
  //         total += Number(order.serviceFee) || 0
  //       })
  //       result[index] = `￥${total.toFixed(2)}`
  //     }

  //     if (item.property === 'orderTotalFee') {
  //       let total = 0
  //       param.data.forEach((order) => {
  //         total += Number(order.orderTotalFee) || 0
  //       })
  //       result[index] = `￥${total.toFixed(2)}`
  //     }
  //   })
  //   return result
  // }

  /**
   * 修改工单按钮点击事件
   */
  const onUpdateOrderClick = () => {
    if (selectedOrderList.value.length <= 0) {
      HMessageBox.error('请选择工单')
      return
    }

    if (selectedOrderList.value.length > 1) {
      HMessageBox.error('只能选择一张工单')
      return
    }

    if (selectedOrderList.value[0]) {
      currentUpdateOrderId.value = selectedOrderList.value[0].id
      dialogStates.value.updateOrder = true
    }
  }

  /**
   * 修改公司按钮点击事件
   */
  // const onUpdateCustomerClick = () => {
  //   if (selecttion.value.length <= 0) {
  //     HMessageBox.error('请选择工单')
  //     return
  //   }

  //   if (selecttion.value.length > 1) {
  //     HMessageBox.error('只能选择一张工单')
  //     return
  //   }

  //   if (selecttion.value[0]) {
  //     currentUpdateCustomerOrderId.value = selecttion.value[0]
  //     updateOrderCustomerModalVisible.value = true
  //   }
  // }

  /**
   * 显示分派网点弹窗
   */
  const showAssignNetworkDialog = () => {
    if (selectedOrderList.value.length === 1) {
      const order = orderList.value.find((item) => item.id === selectedOrderList.value[0].id)
      if (order) {
        Object.assign(userAddress.value, {
          province: order.province,
          city: order.city,
          area: order.area,
          town: order.town,
          address: order.address,
        })
      }
    }
    dialogStates.value.assignNetwork = true
  }

  /**
   * 表格分派网点点击事件
   * @param {Order} order - 工单对象
   */
  const onTableColumnAssignNetworkBtnClick = (order: Order) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(order, undefined)
    }
    selectedOrderList.value = [order]
    showAssignNetworkDialog()
  }

  /**
   * 显示改派网点弹窗
   */
  const onShowUpdateNetworkDialog = () => {
    if (selectedOrderList.value.length > 1) {
      HMessageBox.error('只能选择一张工单')
      return false
    }

    const order = selectedOrderList.value[0]
    if (order.status !== 3) {
      HMessageBox.error('处理中的工单才能改派网点')
      return false
    }

    Object.assign(userAddress.value, {
      province: order.province,
      city: order.city,
      area: order.area,
      town: order.town,
      address: order.address,
    })

    dialogStates.value.updateNetwork = true
  }

  /**
   * 弹窗（分派网点、改派网点、完成、取消、催单、归档、超时提醒、服务过程、修改工单信息）更新事件
   */
  const dialogUpdate = () => {
    getOrderListData()
    selectedOrderList.value.length = 0
  }
  // 表头搜索
  const maxCost = ref(null) // 最大值
  const minCost = ref(null) // 最小值
  const maxTime = ref('') // 服务时长最大值
  const minTime = ref('') // 服务时长最小值
  // 搜索条件显示 1-工单类型 2-报单产品 3-等级 4-工单来源 5-网点 8-客服
  const condition2 = ref([])
  const condition3 = ref([])
  const condition8 = ref([])
  // 是否全选 1-工单类型 2-报单产品 3-等级 4-工单来源  5-网点 8-客服
  const checkAll3 = ref(false)
  const checkAll8 = ref(false)
  // 等级
  const gradeOptions = ref([])
  const grades = ref(null)

  // 网点
  const networkOptions = ref([])
  // const networkSelectData = ref([])
  const reminderCount = ref('')
  const OrderLastLogFun = debounce((id) => {
    reminderCount.value = ''
    axiosCancel()
    getOrderLastLog(id).then((res) => {
      if (res) {
        reminderCount.value =
          res.data.data.row.createTime +
          ' 【' +
          res.data.data.row.type +
          '】' +
          res.data.data.row.createEmp +
          ' ' +
          res.data.data.row.event
      }
    })
  }, 300)

  // 客服
  const customerOptions = ref([])
  const customers = ref(null)
  // 结单审核
  const isCheck = ref(false)
  const checkStatementOrderModalVisible = ref(false)
  const dataCheck = ref({ code: '', id: '' })
  const statementCheck = (row: OrderListItem) => {
    dataCheck.value.code = row.code
    dataCheck.value.id = row.id
    checkStatementOrderModalVisible.value = true
  }
  // 工单客服组下拉列表查询
  const getworkTeamPageSelect = async (val: string) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    getServicePersonOptionsLoading.value = true
    customers.value = []
    const res = await empPageSelecct(data)
    if (res.data.success) {
      customers.value = res.data.data.rows
    }
    getServicePersonOptionsLoading.value = false
  }
  const getOrderLevelOptionsLoading = ref(false)
  // 等级下拉数据
  const getworkLevelPageSelect = async (val: string) => {
    let data = {
      limit: 0,
      name: val,
      page: 0,
    }
    getOrderLevelOptionsLoading.value = true
    grades.value = []
    const res = await workLevelPageSelect(data)
    if (res.data.success) {
      grades.value = res.data.data.rows
    }
    getOrderLevelOptionsLoading.value = false
  }

  // 更新列表筛选的状态
  const handleTableSelectionChangeFilterStatus = async (status: number, childStatusIndex = 0) => {
    listFilterStatus.value = status
    childStatus.value = childStatusIndex
    await getOrderListData()
  }

  const handleTableSelectionChange = (data: Array<Order>) => {
    selectedOrderList.value = data
  }

  // 重置
  const clearValue = () => {
    if (filterInstance.value) {
      filterInstance.value.reset()
    }
    selectedOrderList.value.length = 0
    maxTime.value = ''
    minTime.value = ''
    minCost.value = null
    maxCost.value = null
    serviceTimeRangeType.value = ''
    checkAll3.value = false
    checkAll8.value = false
    getOrderModuleOptionsKeyword.value = ''
    getOrderGradeOptionsKeyword.value = ''
    getServicePersonOptionsKeyword.value = ''
    gradeOptions.value = []
    customerOptions.value = []
    assignNetworkStatus.value = ''
    networkOptions.value = []
    getworkLevelPageSelect('')
    getworkTeamPageSelect('')
    resetGetOrderListParam()
    getOrderListData()
  }

  // 搜索显示tag 1工单类型 2报单产品 3等级 4工单来源 5-网点 6费用 7服务时长 8-客服
  const tagClose = (n: number) => {
    switch (n) {
      case 1:
        break
      case 2:
        condition2.value = []
        break
      case 3:
        gradeOptions.value = []
        condition3.value = []
        break
      case 4:
        break
      case 5:
        break
      case 6:
        minCost.value = null
        maxCost.value = null
        break
      case 7:
        minTime.value = ''
        maxTime.value = ''
        serviceTimeRangeType.value = ''
        break
      case 8:
        customerOptions.value = []
        condition8.value = []
        break
    }
  }

  /**
   * 服务过程编辑按钮点击事件
   * @param {object} order - 工单对象
   */
  const handleEditServiceProcessBtnClick = (order: Order) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(order, undefined)
    }
    selectedOrderList.value = [order]
    noteModalVisible.value = true
  }

  // 查看工单详细
  const goDetail = (val: Order) => {
    router.push(`/order/odetail/${val.id}`)
  }

  // 1-工单类型 2-报单产品 3-等级 5-网点 8-客服
  const onclearinput = (n: number) => {
    switch (n) {
      case 1:
        break
      case 3:
        getworkLevelPageSelect('')
        break
      case 5:
        break
      case 8:
        getworkTeamPageSelect('')
        break
    }
  }
  //@input搜索 1-工单类型 2-报单产品 3-等级 4-费用 5-网点 6-服务时长  8-客服
  const confirmSearch = debounce((n: number) => {
    if (n == 3) {
      checkAll3.value = false
      getworkLevelPageSelect(getOrderGradeOptionsKeyword.value)
    }
    if (n == 4) {
      if (minCost.value || maxCost.value) {
        if (!maxCost.value) {
          return
        }
        if (!minCost.value) {
          minCost.value = 0
        }
      }
      if (minCost.value && maxCost.value) {
        minCost.value = Number(minCost.value)
        maxCost.value = Number(maxCost.value)
      }
      getOrderListData()
    }
    if (n == 6) {
      if (minTime.value || maxTime.value) {
        if (!maxTime.value) {
          return
        }
        if (!minTime.value) {
          minTime.value = 0
        }
      }
      getOrderListData()
    }
    if (n == 8) {
      checkAll8.value = false
      getworkTeamPageSelect(getServicePersonOptionsKeyword.value)
    }
  }, 0)

  //全选@change 1-工单类型 2-报单产品 3-等级 4-工单来源  5-网点 8-客服
  const changeChecked3 = (val) => {
    if (grades.value.length > 0) {
      grades.value.map((o) => {
        if (val) {
          gradeOptions.value = [...gradeOptions.value, o.id]
        } else {
          gradeOptions.value = gradeOptions.value.filter((i) => i != o.id)
        }
      })
    }
  }
  // const changeChecked8 = (val) => {
  //   if (customers.value.length > 0) {
  //     customers.value.map((o) => {
  //       if (val) {
  //         customerOptions.value = [...customerOptions.value, o.id]
  //       } else {
  //         customerOptions.value = customerOptions.value.filter((i) => i != o.id)
  //       }
  //     })
  //     getOrderListData()
  //   }
  // }

  // 节点时效筛选
  const serviceTimeFilter = ref<0 | 1 | ''>('')

  // 获取filter
  const getFilter = (val: boolean) => {
    if (val && paginationInstance.value) {
      paginationInstance.value.setPage()
    }
    let tab: OrderAPIRequest.GetList['status'] = ''
    if (listFilterStatus.value === 0) {
      //判断是切换为全部工单
      tab = ''
    } else {
      tab = listFilterStatus.value
    }
    // 服务时长类型
    if (!(serviceTimeRangeType.value && maxTime.value)) {
      serviceTimeRangeType.value = ''
      maxTime.value = ''
      minTime.value = ''
    }

    let result: null | OrderAPIRequest.GetList = null

    if (filterInstance.value) {
      const filter = filterInstance.value.getFilter()
      if (filter && paginationInstance.value) {
        result = {
          dateFieldType: filter.dateFieldType, // 时间字段类型：1-报单日期，2-完工日期，3-结算日期
          dateType: filter.dateType, //报单时间类型
          fieldId: filter.fieldId, //工单字段名
          fieldSearch: filter.fieldSearch ? filter.fieldSearch.trim() : filter.fieldSearch, //工单字段搜索关键词
          networkType: assignNetworkStatus.value, //网点类型
          networkIds: filter.networkIds, //	服务区域ID
          limit: paginationInstance.value.size, //每页显示数量
          maxPrice: maxCost.value, //费用最大值
          maxServiceTime: maxTime.value, //最大服务时长值
          orderNodeTimeoutType: serviceTimeFilter.value ? serviceTimeFilter.value : '', // 工单节点时效类型：0-未超时工单，1-已超时工单
          minPrice: minCost.value, //费用最小值
          minServiceTime: minTime.value, //最小服务时长值
          moduleIds: filter.moduleIds, //工单模块ID
          orderEndTime: filter.orderEndTime, //报单结束时间
          orderNo: filter.orderNo ? filter.orderNo.trim() : filter.orderNo, //工单单号
          orderStartTime: filter.orderStartTime, //报单开始时间
          page: paginationInstance.value.current, //当面页码
          serviceTimeType: serviceTimeRangeType.value, //服务时长类型
          status: tab, //工单状态
          orderStatus: filter.orderStatus, //状态查询
          snCode: filter.snCode, //条码
          goodsCode: filter.goodsCode, //产品编号
          engineer: filter.engineer, //	工程师关键词搜索：工程师名称/工程师手机号
          goodsSearch: filter.goodsSearch ? filter.goodsSearch.trim() : filter.goodsSearch, //	产品搜索：品牌/产品名称/产品型号
          orderUserSearch: filter.orderUserSearch
            ? filter.orderUserSearch.trim()
            : filter.orderUserSearch, // 工单公司搜索关键词：公司名称/公司手机号/公司地址
          workLevelIds: gradeOptions.value, //等级ID
          childStatus: childStatus.value == 0 ? '' : childStatus.value,
          workSourceIds: filter.workSourceIds, //工单来源ID
          empIds: filter.empIds,
          departmentId: filter.departmentId,
          sendForRepairUsername: filter.sendForRepairUsername,
          sendForRepairPhone: filter.sendForRepairPhone,
          buyPlatformOrderNo: filter.buyPlatformOrderNo,
          otherOrderNo: filter.otherOrderNo,
          agingFiltrate: filter.agingFiltrate,
        }
      }
    }

    return result
  }

  /**
   * 获取表格单元格内容显示在页面上的宽度
   * @param {String} val - 表格单元格内容
   */
  const getStrRenderWidth = (val: string) => {
    let result = 140

    if (val) {
      const tempSpanEle = document.createElement('span')
      tempSpanEle.innerHTML = val
      tempSpanEle.style.display = 'absolute'
      tempSpanEle.style.visibility = 'hidden'
      document.body.appendChild(tempSpanEle)
      result = tempSpanEle.getBoundingClientRect().width
      document.body.removeChild(tempSpanEle)
    }

    return Math.ceil(result)
  }

  /**
   * 获取工单列表最大长度的值
   * @param {string} field - 工单字段
   */
  const getMaxlengthValForField = (field: string) => {
    return orderList.value
      .map((order) => {
        if (field === 'userAddress') {
          return order['address']
        }

        if (field === 'engineer') {
          return `${order['engineer']} ${order['enginnerPhone']}`
        }

        return order[field]
      })
      .reduce(
        (prev, current) =>
          (current || '').length > (prev || '').length ? current || '' : prev || '',
        0,
      )
  }

  /**
   * 表格列宽
   */
  const tableColumnWidth = computed(() => {
    const result: Record<string, number> = {
      siebelFinishTime: 150,
      createTime: 128,
      mobileNumber: 120,
      userCompanyPhone: 120,
      sendForRepairPhone: 120,
      code: 160,
      status: 180,
      userProvince: 110,
      userCity: 110,
      userArea: 110,
      workServiceType: 80,
      workServiceMode: 80,
      orderGoodsBrand: 80,
      workGoodsType: 80,
      thirdPushState: 100,
    }

    OrderListTable.value.forEach((field) => {
      if (!Object.keys(result).includes(field.code)) {
        const maxLengthStr = getMaxlengthValForField(field.code)
        if (maxLengthStr) {
          const width = getStrRenderWidth(maxLengthStr) + 24 + 2
          result[field.code] = width
          if (width >= 500) {
            result[field.code] = 500
          }

          if (width < 80) {
            result[field.code] = 80
          }
        }
      }
    })

    return result
  })

  // 获取工单列表
  const getOrderListData = async (val = true) => {
    const filter = getFilter(val)
    if (filter) {
      getOrderListParam.value = filter
      await getOrderList()
    }
  }

  // const getOrderListTableTitleFieldList = async () => {
  //   getOrderListTableHeaderCustomFieldLoading.value = true
  //   const res = await getOrderListTableTitleField()
  //   getOrderListTableHeaderCustomFieldLoading.value = false
  //   if (res.data.success) {
  //     tableHeaderCustomField.value = res.data.data.rows
  //   }
  // }

  const OrderListTable = ref<Array<OrderListTableField>>([])
  const getOrderListTableFieldList = async () => {
    getOrderListTableHeaderFieldLoading.value = true
    const res = await getOrderListTableField(1)
    getOrderListTableHeaderFieldLoading.value = false
    if (res) {
      OrderListTable.value = res.data.data.rows
    }
  }

  // 导出字段的筛选
  const exportFieldFilter = ref<GetOrderListParam | null>(null)

  // 保存并导出
  const onExport = () => {
    // 服务时长类型
    if (!(serviceTimeRangeType.value && maxTime.value)) {
      serviceTimeRangeType.value = ''
      maxTime.value = ''
      minTime.value = ''
    }

    exportFieldFilter.value = getFilter(false)
    dialogStates.value.export = true
  }

  // 备注弹窗状态
  const noteModalVisible = ref(false)

  /**
   * 从首页获取筛选条件，然后设置到筛选上
   */
  const setFilterFromHome = () => {
    if (route.name === 'orderList') {
      const dateType = route.query.type as 'today' | 'month' | 'week' | 'all'
      if (['today', 'month', 'week'].includes(dateType) && filterInstance.value) {
        filterInstance.value.setDateType(dateType as 'today' | 'month' | 'week')
      }

      if (dateType === 'all') {
        filterInstance.value && filterInstance.value.reset()
        statusQtyTabInstance.value && statusQtyTabInstance.value.setTabs(0)
      }
    }

    if ([0, 1, 2, 3, 4, 5, 1040, 1020].includes(Number(route.query.status))) {
      if (
        [0, 1, 2, 3, 4, 5, 6].includes(Number(route.query.childStatus)) ||
        route.query.childStatus === ''
      ) {
        if (statusQtyTabInstance.value) {
          const _status = Number(route.query.status) as 0 | 1 | 2 | 3 | 4 | 5 | 1040 | 1020
          const _childStatus = Number(route.query.childStatus) as 0 | 1 | 2 | 3 | 4 | 5 | 6
          statusQtyTabInstance.value.setChildTabs(_status, _childStatus)
          listFilterStatus.value = _status
          childStatus.value = _childStatus
        }
      }
    }

    // const statusChild = route.query.statusChild as string | undefined
    // if (route.query.statusChild) {
    //   if (statusChild !== undefined && /[0-5]$/.test(statusChild)) {
    //     const statusNumber = parseInt(statusChild, 10)
    //     statusQtyTabInstance.value &&
    //       statusQtyTabInstance.value.setChildTabs(3, statusNumber as 0 | 1 | 2 | 3 | 4 | 5)
    //     listFilterStatus.value = 3
    //     childStatus.value = statusNumber
    //   }
    // }
  }
  /**
   * 工单等级筛选更新事件
   */
  const handleOrderLevelFilterChange = () => {
    checkAll3.value = grades.value.every((o) => {
      return gradeOptions.value.includes(o.id)
    })
    grades.value.filter((o) => {
      if (gradeOptions.value.includes(o.id)) {
        if (condition3.value.length > 0) {
          if (!condition3.value.some((i) => i.id == o.id)) {
            condition3.value.push(o)
          }
        } else {
          condition3.value.push(o)
        }
      }
    })
    let arr = condition3.value
    condition3.value = []
    gradeOptions.value.map((o) => {
      arr.filter((i) => {
        if (i.id == o) {
          condition3.value.push(i)
        }
      })
    })
    getOrderListData()
  }

  /**
   * 客服筛选更新事件
   */
  // const handleServicePersonFilterChange = () => {
  //   checkAll8.value = customers.value.every((o) => {
  //     return customerOptions.value.includes(o.id)
  //   })
  //   customers.value.filter((o) => {
  //     if (customerOptions.value.includes(o.id)) {
  //       if (condition8.value.length > 0) {
  //         if (!condition8.value.some((i) => i.id == o.id)) {
  //           condition8.value.push(o)
  //         }
  //       } else {
  //         condition8.value.push(o)
  //       }
  //     }
  //   })
  //   let arr = condition8.value
  //   condition8.value = []
  //   customerOptions.value.map((o) => {
  //     arr.filter((i) => {
  //       if (i.id == o) {
  //         condition8.value.push(i)
  //       }
  //     })
  //   })
  //   getOrderListData()
  // }

  const onCheckFinishOrderClick = () => {
    ElMessageBox({
      title: '提示',
      type: 'warning',
      message: '是否要审核完工？',
      confirmButtonText: '审核通过',
      showCancelButton: true,
      cancelButtonText: '审核驳回',
      autofocus: false,
      distinguishCancelAndClose: true,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      async beforeClose(action, instance, done) {
        if (['confirm', 'cancel'].includes(action)) {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await finishOrderMultipleCheck(
              selectedOrderList.value.map((item) => item.id),
              action === 'cancel' ? 2 : 1,
            )
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.data.code === 20000) {
              HMessage.success('审核完成')
              done()
              getOrderListData()
              return
            }

            HMessageBox.error(res.data.message)
          } catch (error) {
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
          }

          return
        }

        done()
      },
    })
  }

  const onTableColumnSetUpdate = () => {
    getOrderListData()
    getOrderListTableFieldList()
  }

  // watch(
  //   () => route.name,
  //   () => {
  //     setFilterFromHome()
  //     getOrderListData()
  //   },
  // )

  onMounted(() => {
    setFilterFromHome()

    // 获取自定义字段
    // getOrderListTableTitleFieldList()

    // 获取表格字段
    getOrderListTableFieldList()
    // getworkLevelPageSelect('')
    // getworkTeamPageSelect('')
    getOrderListData()

    if (statusQtyTabInstance.value) {
      isCheck.value = listFilterStatus.value == 1001
      getOrderQtyStatisticsLoading.value = true
      statusQtyTabInstance.value.getOrderStatusQtyData().then(() => {
        getOrderQtyStatisticsLoading.value = false
      })
    }

    nextTick(() => {
      if (filterInstance.value) {
        filterInstance.value.getDepartmentOptions()
      }
    })
  })
</script>

<template>
  <div v-loading="loading" element-loading-text="加载中..." class="order-list-wrapper">
    <div class="status-filter">
      <order-list-status-tabs
        ref="statusQtyTabInstance"
        @change-status="handleTableSelectionChangeFilterStatus"
      />
    </div>
    <div class="content">
      <div class="filter_btn_group">
        <div class="search_filter">
          <Filter ref="filterInstance" @get-list="getOrderListData" @clear="clearValue" />
        </div>

        <div class="btn_group">
          <router-link to="/order/new">
            <h-button
              v-permission="'order_add'"
              :content-style="{ fontWeight: 'bold' }"
              type="primary"
            >
              新建工单
            </h-button>
          </router-link>
          <h-plain-button
            v-permission="'order_assignNetwork'"
            :disabled="selectedOrderList.length <= 0"
            @click="showAssignNetworkDialog"
          >
            分派网点
          </h-plain-button>
          <h-plain-button
            v-permission="'order_updateNetwork'"
            :disabled="selectedOrderList.length <= 0"
            @click="onShowUpdateNetworkDialog"
          >
            改派网点
          </h-plain-button>
          <!-- <HPlainButton
            :disabled="selecttion.length <= 0"
            @click="assignCustomerServiceDialogVisible = true"
            >分配客服
          </HPlainButton> -->
          <h-plain-button
            v-permission="'order_update'"
            :disabled="selectedOrderList.length <= 0"
            @click="onUpdateOrderClick"
          >
            处理工单
          </h-plain-button>
          <!-- <h-plain-button
            v-permission="'order_updateCustomer'"
            :disabled="selecttion.length <= 0"
            @click="onUpdateCustomerClick"
            >修改客户</h-plain-button
          > -->
          <!-- <HPlainButton
            :disabled="selecttion.length <= 0"
            @click="serviceProcessDialogVisible = true"
          >
            服务过程
          </HPlainButton> -->
          <!-- <HPlainButton :disabled="selecttion.length <= 0" @click="reminderDialogVisible = true"
            >催单</HPlainButton
          >
          <HPlainButton :disabled="selecttion.length <= 0" @click="timeoutTipDialogVisible = true"
            >超时提醒</HPlainButton
          > -->
          <h-plain-button
            v-permission="'order_updateFinisher'"
            :disabled="selectedOrderList.length <= 0"
            type="success"
            @click="dialogStates.finishOrder = true"
          >
            完成
          </h-plain-button>
          <h-plain-button
            v-if="listFilterStatus === 1001"
            v-permission="'order_review_finish'"
            :disabled="selectedOrderList.length <= 0"
            @click="onCheckFinishOrderClick"
          >
            审核完工
          </h-plain-button>
          <el-dropdown trigger="click">
            <h-button>
              <span>更多</span>
              <el-icon style="margin-left: 5px">
                <ArrowDown />
              </el-icon>
            </h-button>
            <template #dropdown>
              <el-dropdown-menu>
                <div v-permission="'order_export'">
                  <el-dropdown-item @click="onExport">导出</el-dropdown-item>
                </div>
                <div v-permission="'order_import'">
                  <router-link to="/order/orderExcelImport">
                    <el-dropdown-item>导入</el-dropdown-item>
                  </router-link>
                </div>
                <div v-permission="'order_archive'">
                  <el-dropdown-item
                    :disabled="selectedOrderList.length <= 0"
                    @click="dialogStates.archive = true"
                  >
                    归档
                  </el-dropdown-item>
                </div>
                <div v-permission="'order_cancel'">
                  <el-dropdown-item
                    :disabled="selectedOrderList.length <= 0"
                    @click="dialogStates.cancel = true"
                  >
                    取消
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 筛选条件 -->
      <div style="width: 80%">
        <ShowTooltip
          v-if="gradeOptions.length > 0"
          ref-name="testName3"
          class-name="text-over-tooltip-components"
          :content="`等级: ${condition3.map((o) => o.name).join('、')}`"
          @close="tagClose(3)"
        />
        <ShowTooltip
          v-if="(minCost || minCost == 0) && (maxCost || maxCost == 0)"
          ref-name="testName6"
          class-name="text-over-tooltip-components"
          :content="`费用:￥ ${Number(minCost).toFixed(2)}~￥${Number(maxCost).toFixed(2)}`"
          @close="tagClose(6)"
        />
        <ShowTooltip
          v-if="(minTime || minTime == 0) && (maxTime == 0 || maxTime) && serviceTimeRangeType"
          ref-name="testName7"
          class-name="text-over-tooltip-components"
          :content="`服务时长: ${minTime}~${maxTime}${serviceTimeRangeType == 1 ? '小时' : '天'}`"
          @close="tagClose(7)"
        />
        <ShowTooltip
          v-if="customerOptions.length > 0"
          ref-name="testName8"
          class-name="text-over-tooltip-components"
          :content="`客服: ${condition8.map((o) => o.name).join('、')}`"
          @close="tagClose(8)"
        />
      </div>

      <div class="table-pagination">
        <!-- 列表 -->
        <div class="table">
          <el-table
            ref="tableInstance"
            height="100%"
            :border="true"
            stripe
            resizable
            row-key="id"
            :data="orderList"
            scrollbar-always-on
            :tooltip-options="{
              popperClass: 'return-factory-reason',
            }"
            @selection-change="handleTableSelectionChange"
            @row-dblclick="goDetail"
          >
            <!--选择-->
            <el-table-column type="selection" :align="'center'" width="50" />

            <!-- 序号 -->
            <el-table-column type="index" label="序号" fixed="left" width="50" :align="'center'" />

            <!-- 工单字段 -->
            <template v-for="item in OrderListTable" :key="item.code">
              <el-table-column
                v-if="item.showColumn"
                show-overflow-tooltip
                :fixed="item.freezeColumn"
                :header-align="'center'"
                :align="
                  ['userAddress', 'network', 'status'].includes(item.code) ? 'left' : 'center'
                "
                :prop="item.code"
                :label="item.name"
                :width="tableColumnWidth[item.code]"
                :sortable="sortColumn.includes(item.code)"
              >
                <template #header>
                  <!--  等级 -->
                  <template v-if="item.code === 'level'">
                    {{ item.name }}
                    <el-popover ref="popoverDom4" placement="bottom" :width="250" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="search-input">
                        <el-input
                          v-model.trim="getOrderGradeOptionsKeyword"
                          clearable
                          placeholder="搜索等级"
                          @clear="onclearinput(3)"
                          @keyup.enter="confirmSearch(3)"
                        />
                      </div>
                      <div class="checkboxs">
                        <el-checkbox v-model="checkAll3" @change="changeChecked3">全选</el-checkbox>
                        <el-scrollbar class="checkboxs-scrollbar" max-height="350px">
                          <el-checkbox-group
                            v-model="gradeOptions"
                            @change="handleOrderLevelFilterChange"
                          >
                            <el-checkbox v-for="grade in grades" :key="grade.id" :value="grade.id">
                              {{ grade.name }}
                            </el-checkbox>
                          </el-checkbox-group>
                        </el-scrollbar>
                      </div>
                    </el-popover>
                  </template>

                  <!-- 工单总费用 -->
                  <template v-else-if="item.code === 'totalPrice'">
                    <div style="display: flex; justify-content: flex-start; gap: 5px">
                      {{ item.name }}
                      <el-popover
                        ref="popoverDom5"
                        placement="bottom"
                        :width="250"
                        trigger="click"
                        @hide="confirmSearch(4)"
                      >
                        <template #reference>
                          <span class="iconfont icon-shaixuan" style="margin: 0"></span>
                        </template>
                        <div class="values flex-justify-between">
                          <el-input
                            v-model.trim.number="minCost"
                            clearable
                            placeholder="最小值"
                            class="cost-input"
                          />
                          <span>~</span>
                          <el-input
                            v-model.trim.number="maxCost"
                            clearable
                            placeholder="最大值"
                            class="cost-input"
                          />
                        </div>
                      </el-popover>
                    </div>
                  </template>

                  <!--  服务时长 -->
                  <template v-else-if="item.code === 'totalServiceTime'">
                    {{ item.name }}
                    <el-popover
                      ref="popoverDom7"
                      placement="bottom"
                      :width="250"
                      trigger="click"
                      @hide="confirmSearch(6)"
                    >
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div class="radios change-radio">
                        时间单位
                        <el-radio-group v-model="serviceTimeRangeType" class="display_flxe">
                          <el-radio :value="1">小时</el-radio>
                          <el-radio :value="2">天</el-radio>
                        </el-radio-group>
                      </div>
                      <div class="values flex-justify-between">
                        <el-input
                          v-model.trim="minTime"
                          clearable
                          placeholder="最小值"
                          class="time-input"
                        />
                        <span>~</span>
                        <el-input
                          v-model.trim="maxTime"
                          clearable
                          class="time-input"
                          placeholder="最大值"
                        />
                      </div>
                    </el-popover>
                  </template>

                  <!-- 节点时效 -->
                  <template v-else-if="item.code === 'serviceTime'">
                    {{ item.name }}
                    <el-popover placement="bottom" :width="200" trigger="click">
                      <template #reference>
                        <span class="iconfont icon-shaixuan"></span>
                      </template>
                      <div>
                        <el-radio-group v-model="serviceTimeFilter" @change="getOrderListData">
                          <el-radio value="">查询全部</el-radio>
                          <!-- <el-radio value="0">未超时</el-radio> -->
                          <el-radio value="1">已超时</el-radio>
                        </el-radio-group>
                      </div>
                    </el-popover>
                  </template>

                  <!-- 客服 -->
                  <!-- <template v-else-if="item.code === 'emp'">
                    {{ item.name }} -->
                  <!-- <el-popover
                      ref="popoverDom9"
                      placement="bottom"
                      :width="250"
                      trigger="click"
                      :visible="customerServiceOptionsPopoverVisible"
                    >
                      <template #reference>
                        <span
                          class="iconfont icon-shaixuan"
                          @click="onCustomerServiceFilterClick"
                        ></span>
                      </template>
                      <div class="search-input">
                        <el-input
                          v-model.trim="getServicePersonOptionsKeyword"
                          clearable
                          placeholder="搜索客服"
                          @clear="onclearinput(8)"
                          @keyup.enter="confirmSearch(8)"
                        />
                      </div>
                      <div v-loading="getServicePersonOptionsLoading" class="checkboxs">
                        <el-checkbox v-model="checkAll8" @change="changeChecked8">全选</el-checkbox>
                        <el-scrollbar class="checkboxs-scrollbar" max-height="350px">
                          <el-checkbox-group
                            v-model="customerOptions"
                            @change="handleServicePersonFilterChange"
                          >
                            <el-checkbox
                              v-for="item in customers"
                              :key="item.id"
                              :value="item.id"
                              >{{ item.name }}</el-checkbox
                            >
                          </el-checkbox-group>
                        </el-scrollbar>
                      </div>
                    </el-popover> -->
                  <!-- </template>

                  <template v-else>
                    {{ item.name }}
                  </template> -->
                </template>
                <template #default="{ row }">
                  <!-- 工单单号 -->
                  <template v-if="item.code === 'code'">
                    <h-link @click="goDetail(row)">{{ row.code }}</h-link>
                  </template>

                  <!-- 推送结果 -->
                  <template v-if="item.code === 'thirdPushState'">
                    <template v-if="row.network && row.network.includes('电匠院')">
                      <template v-if="row.thirdPushState">
                        <h-status v-if="row.thirdPushErrorMsg" type="error">推送失败</h-status>
                        <h-status v-else>推送成功</h-status>
                      </template>
                      <h-status v-else type="info">未推送</h-status>
                    </template>
                  </template>

                  <!-- 推送失败原因 -->
                  <template v-if="item.code === 'thirdPushErrorMsg'">
                    <template v-if="row.network && row.network.includes('电匠院')">
                      {{ row.thirdPushErrorMsg }}
                    </template>
                  </template>

                  <!-- 工单状态 -->
                  <template v-if="item.code === 'status'">
                    <div class="flex column-gap-5px">
                      <h-status v-if="row.status === 1" type="warning">待派单</h-status>
                      <h-status v-if="row.status === 2" type="warning">待网点确认</h-status>
                      <h-status v-if="row.status === 3" type="warning">处理中</h-status>
                      <h-status v-if="row.status === 4" type="success">已完成</h-status>
                      <h-status v-if="row.status === 5" type="info">已取消</h-status>
                      <!-- <HStatus
                        v-if="scope.row.settlementStatus === 0"
                        style="margin-left: 5px"
                        :type="scope.row.settlementStatus == 1 ? 'warning' : 'success'"
                        >{{ scope.row.settlementStatusName }}</HStatus
                      > -->
                      <span v-if="row.reminder && row.status !== 4" class="reminder">
                        <i
                          class="fa fa-volume-up"
                          style="padding-right: 2px"
                          aria-hidden="true"
                          color="#007cff"
                        ></i>
                        已催{{ row.reminderCount }}次
                      </span>
                      <template v-if="row.status === 4 && !userStore.isCurrentRoleNetwork">
                        <h-status v-if="parseInt(row.orderTotalFee) === 0" type="info">
                          无需收款
                        </h-status>
                        <template v-else>
                          <h-status v-if="row.userPayment">已收款</h-status>
                          <h-status v-else type="info">未收款</h-status>
                        </template>
                        <!-- <h-status v-if="parseInt(scope.row.orderTotalFee) === 0" type="info"
                          >无需开票</h-status
                        >
                        <template v-else>
                          <h-status v-if="scope.row.openTicket">已申请开票</h-status>
                          <h-status v-else type="info">未申请开票</h-status>
                        </template> -->
                      </template>
                      <template v-else>
                        <h-status v-if="row.snCodeStatus === 1" type="warning">
                          条码待审核
                        </h-status>
                        <h-status v-if="row.snCodeStatus === 2">条码已审核</h-status>
                        <h-status v-if="row.snCodeStatus === 3" type="error">
                          条码审核已驳回
                        </h-status>
                      </template>
                      <el-tooltip
                        v-if="row.newProgress && row.status !== 4"
                        placement="top"
                        :show-after="600"
                      >
                        <template #content>
                          <span>{{ reminderCount || '加载中...' }}</span>
                        </template>
                        <div class="repeat" @mouseenter="OrderLastLogFun(row.id)">
                          <i color="#F13030" class="fa fa-caret-left" aria-hidden="true"></i>
                          <span class="text_tip">NEW</span>
                        </div>
                      </el-tooltip>
                    </div>
                  </template>

                  <!-- 服务过程 -->
                  <template v-if="item.code === 'serviceProcess'">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        gap: 3px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                      "
                    >
                      <div style="display: flex; align-items: center">
                        <el-button
                          style="padding: 0"
                          link
                          :icon="Edit"
                          type="primary"
                          color="#007cff"
                          @click.stop="handleEditServiceProcessBtnClick(row)"
                        />
                      </div>
                      <div style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap">{{
                        row.serviceProcess
                      }}</div>
                    </div>
                  </template>

                  <!-- 节点时效 -->
                  <template v-if="item.code === 'serviceTime'">
                    <div v-if="row.nodeTimeout" class="node_time_out">
                      <h-status type="error">已超时</h-status>
                      <span style="color: #f56c6c"> {{ row.nodeOverTime }} </span>
                    </div>
                  </template>

                  <!-- 网点 -->
                  <template v-if="item.code === 'network'">
                    <span v-if="row.network">{{ row.network }}</span>
                    <h-link
                      v-else-if="row.status == 1"
                      @click.stop="onTableColumnAssignNetworkBtnClick(row)"
                    >
                      分派网点
                    </h-link>
                  </template>

                  <!--工单来源-->
                  <template v-if="item.code === 'source'">
                    {{ row.workSource }}
                  </template>

                  <template v-if="item.code === 'level'">
                    <span :style="{ color: row.workLevelColor }">{{ row.workLevel }}</span>
                  </template>

                  <!-- 工程师 -->
                  <template v-if="item.code === 'engineer'">
                    <span>{{ row.engineer }}&nbsp;{{ row.enginnerPhone }}</span>
                  </template>

                  <!-- 公司地址 -->
                  <template v-if="item.code === 'userProvince'">
                    <span>{{ row.province }}</span>
                  </template>
                  <template v-if="item.code === 'userCity'">
                    <span>{{ row.city }}</span>
                  </template>
                  <template v-if="item.code === 'userArea'">
                    <span>{{ row.area }}</span>
                  </template>
                  <template v-if="item.code === 'userAddress'">
                    <span>{{ row.address }}</span>
                  </template>

                  <!--总服务时长-->
                  <template v-if="item.code === 'totalServiceTime'">
                    <span :style="{ color: row.serviceTimeColor }">{{ row.serviceTime }}</span>
                  </template>

                  <!--商家结算总价-->
                  <template v-if="item.code === 'factorySettlementTotalPrice'">
                    ￥{{ row.factorySettlementTotalPrice.toFixed(2) }}
                  </template>

                  <!--网点结算总价-->
                  <template v-if="item.code === 'networkSettlementTotalPrice'">
                    ￥{{ row.networkSettlementTotalPrice.toFixed(2) }}
                  </template>

                  <!--异常费用-->
                  <template v-if="item.code === 'abnormalFee'">
                    ￥{{ row.abnormalFee.toFixed(2) }}
                  </template>

                  <!-- 物料费 -->
                  <template v-if="item.code === 'materialFee'">
                    ￥{{ (Number(row.materialFee) || 0).toFixed(2) }}
                  </template>

                  <!-- 服务费 -->
                  <template v-if="item.code === 'serviceFee'">
                    ￥{{ (Number(row.serviceFee) || 0).toFixed(2) }}
                  </template>

                  <!-- 工单金额 -->
                  <template v-if="item.code === 'orderTotalFee'">
                    ￥{{ (Number(row.orderTotalFee) || 0).toFixed(2) }}
                  </template>
                </template>
              </el-table-column>
            </template>

            <!-- 自定义字段 -->
            <!-- <el-table-column
              v-for="(key, index) in tableHeaderCustomField"
              :key="index"
              :show-overflow-tooltip="true"
              :label="key.name"
              width="100"
            >
              <template #header>
                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{
                  key.name
                }}</div>
              </template>
              <template #default="item">
                <template v-for="i in item.row.fieldVals">
                  {{ i.id == key.id ? i.val : '' }}
                </template>
              </template>
            </el-table-column> -->
            <!-- 表单设置 -->
            <el-table-column
              :align="'center'"
              fixed="right"
              :width="listFilterStatus == 1001 && isCheck ? 50 : 36"
              label-class-name="table_setting"
            >
              <template #header>
                <el-tooltip effect="dark" content="列表设置" placement="top-start">
                  <i
                    class="iconfont icon-liebiaoshezhi-list-setting"
                    @click="dialogStates.tableColumnSet = true"
                  ></i>
                </el-tooltip>
              </template>
              <template v-if="listFilterStatus == 1001 && isCheck" #default="{ row }">
                <h-link v-if="row.status == 3" @click="statementCheck(row)">审核</h-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <Pagination
            ref="paginationInstance"
            :list_total="orderListTotal"
            @size-change="getOrderListData"
            @current-change="getOrderListData(false)"
          />
        </div>
      </div>

      <check-statement-order
        v-model="checkStatementOrderModalVisible"
        :word-no="dataCheck.code"
        :word-id="dataCheck.id"
        @update="dialogUpdate"
      />

      <assign-network
        v-model="dialogStates.assignNetwork"
        :selecttion="selectedOrderList.map((item) => item.id)"
        :address="userAddress"
        @update="dialogUpdate"
      />

      <update-network
        v-if="selectedOrderList[0]"
        v-model="dialogStates.updateNetwork"
        :address="userAddress"
        :network="selectedOrderList[0].network ? selectedOrderList[0].network : ''"
        :network-id="selectedOrderList[0].networkId"
        :order-id="selectedOrderList[0].id"
        @update="dialogUpdate"
      />

      <assign-customer-service
        v-model="dialogStates.assignCustomerService"
        is-batch
        :order-ids="selectedOrderList.map((item) => item.id)"
        @update="dialogUpdate"
      />

      <service-process
        v-model="dialogStates.serviceProcess"
        is-batch
        :order-ids="selectedOrderList.map((item) => item.id)"
        @update="dialogUpdate"
      />

      <reminder
        v-model="dialogStates.reminder"
        :order-ids="selectedOrderList.map((item) => item.id)"
        @update="dialogUpdate"
      />

      <timeout-tip
        v-model="dialogStates.timeoutTip"
        :order-ids="selectedOrderList.map((item) => item.id)"
        @update="dialogUpdate"
      />

      <finish-order
        v-model="dialogStates.finishOrder"
        :order-ids="selectedOrderList.map((item) => item.id)"
        is-batch
        @update="dialogUpdate"
      />

      <archive
        v-model="dialogStates.archive"
        :order-ids="selectedOrderList.map((item) => item.id)"
        @update="dialogUpdate"
      />

      <cancel-order
        v-model="dialogStates.cancel"
        is-batch
        :order-ids="selectedOrderList.map((item) => item.id)"
        @update="dialogUpdate"
      />

      <table-column-set
        v-model="dialogStates.tableColumnSet"
        :type="1"
        @update-list="onTableColumnSetUpdate"
      />

      <order-export
        v-if="exportFieldFilter"
        v-model="dialogStates.export"
        :export-filter="exportFieldFilter"
      />

      <update-order-info-modal
        v-model:visible="dialogStates.updateOrder"
        :order-id="currentUpdateOrderId"
        @update="dialogUpdate"
      />

      <!-- <update-order-customer-info-modal
        v-model:visible="updateOrderCustomerModalVisible"
        :order-id="currentUpdateCustomerOrderId"
        @update="dialogUpdate"
      ></update-order-customer-info-modal> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
  :deep(.return-factory-reason) {
    max-width: 300px !important;
    max-height: 150px !important;
    overflow: auto !important;
  }

  :deep(.table_setting) {
    padding: 0 !important;

    .cell {
      height: 24px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 24px !important;
        width: 24px;
        height: 20px;
        color: $primaryColor;
        margin: 0 !important;
      }
    }
  }

  .order-list-wrapper {
    height: calc(100vh - 92px);
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;

    .status-filter {
      width: 100%;
      height: fit-content;
      background: #ffffff;
      padding: 0 12px;
      box-sizing: border-box;
    }

    .content {
      flex: 1;
      height: 0;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px;
      display: flex;
      flex-direction: column;

      .table-pagination {
        flex: 1;
        height: 0;
        display: flex;
        flex-direction: column;
        row-gap: 12px;

        :deep(.table) {
          max-height: calc(100% - 40px);

          .iconfont {
            margin-left: auto;
            font-size: 12px;
            cursor: pointer;
          }

          .flex-justify-between {
            flex-wrap: nowrap;
            justify-content: flex-start;
          }

          .repeat {
            display: flex;
            align-items: center;
            text-align: center;
            font-size: 12px;
            margin-left: 10px;
            margin-right: 6px;
            color: #f13030;
            cursor: pointer;
            font-family: Arial, Helvetica, sans-serif;

            .fa-caret-left {
              font-size: 15px;
            }

            .text_tip {
              padding-top: 2px;
              margin-left: 2px;
            }
          }

          .reminder {
            display: inline-block;
            font-size: 12px;
            margin-left: 10px;
            color: $primaryColor;
            cursor: pointer;
          }

          .module {
            display: inline-block;
            font-size: 12px;
            line-height: 22px;
            padding: 0 6px;
            border-radius: 2px;
            color: #383838;
            background: #e6eaf0;
          }

          .status {
            display: inline-block;
            font-size: 12px;
            line-height: 22px;
            padding: 0 6px;
            border-radius: 2px;
          }

          .bg-status1 {
            color: #00c0c0;
            background: #e1f8f8;
          }

          .bg-status2 {
            color: #e69103;
            background: #fdf4de;
          }

          .bg-status3 {
            color: #007cff;
            background: #e6f1ff;
          }

          .bg-status4 {
            color: #f56c6c;
            background: #f5efef;
          }

          .select-work {
            display: inline-block;
            font-size: 12px;
            padding: 0 4px;
            border-radius: 2px;
            color: #ffffff;
            background-color: #00c0c0;
            cursor: pointer;
          }
          // :deep(td.el-table-fixed-column--right) {
          //   display: none;
          // }
          .is-first-column {
            &td.el-table-fixed-column--right {
              display: none;
            }
          }
        }

        .pagination {
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }

  :deep(.el-tag) {
    border: none !important;
  }

  .node_time_out {
    width: 100%;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .filter_btn_group {
    display: flex;
    flex-direction: column;

    .search_filter {
      width: 100%;
      display: flex;
      gap: 5px;
      margin-bottom: 12px;
      justify-content: flex-start;
    }

    .btn_group {
      display: flex;
      gap: 5px;
      margin-bottom: 12px;

      .btn_item {
        margin: 0;
        height: 28px;
        border-radius: 2px !important;
      }
    }
  }

  .radios {
    :deep(.el-radio-group) {
      flex-direction: column;
      align-items: start;
    }

    .display_flxe {
      margin-left: 10px;
    }

    :deep(.el-radio__label) {
      font-size: 12px;
    }
  }

  .change-radio {
    display: flex;
    align-items: center;

    :deep(.el-radio-group) {
      flex-direction: row;

      .el-radio {
        margin-right: 10px;
      }
    }
  }

  .search-input {
    margin-bottom: 10px;
  }

  :deep(.el-checkbox__label) {
    font-size: 12px !important;
  }

  .checkboxs {
    display: inline-flex;
    flex-direction: column;

    .el-checkbox-group {
      display: inline-flex;
      flex-direction: column;

      :deep(.el-checkbox__label) {
        font-size: 12px !important;
      }
    }

    .checkboxs-scrollbar {
      width: 240px;
    }
  }

  .values {
    margin-bottom: 5px;

    .cost-input {
      width: 100px;
    }

    .time-input {
      width: 100px;
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
    width: 16px;
    height: 16px;
    background-color: #007cff;
  }

  .btn_save {
    width: 60px;
  }

  .btn_delete {
    width: 60px;
    color: #fff;
  }

  .btn_cancel {
    width: 60px;

    &:hover {
      border: 1px solid #e5e5e5;
      color: #999;
      background-color: #e5e5e5;
    }
  }

  :deep(.mb-info) {
    margin-bottom: 5px;
    padding: 5px 2px;
    display: flex;

    .el-alert__description {
      margin: 0;
    }

    .el-alert__close-btn {
      top: calc(50% - 6px);
      right: 8px;
    }
  }

  :deep(.assign-dialog) {
    .el-dialog__body {
      padding: 20px;
    }

    .el-form-item {
      margin-bottom: 14px;
    }

    .el-form-item__label {
      font-size: 12px;
    }

    .el-textarea__inner {
      font-size: 12px;
      height: 120px;
      border-radius: 2px;
    }

    h3 {
      font-size: 14px;

      .comple {
        color: #00c0c0;
      }

      .cancel {
        color: #f56c6c;
      }
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .title {
      position: relative;
      padding: 10px 20px;
      border-radius: 2px;
      color: #808080;
      background-color: #eff3f7;

      &::before {
        position: absolute;
        content: '';
        left: 5px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-radius: 50%;
        background-color: #e69103;
      }
    }

    .list {
      .iconfont {
        font-size: 18px;
        margin-right: 5px;
        color: #00c0c0;
      }

      .num {
        color: #e69103;
      }
    }

    .footer {
      margin-top: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn-save {
        border-color: #00c0c0;
        background-color: #00c0c0;
      }

      .btn-cancel {
        color: #383838;
        border-color: #a6a6a6;
        background-color: transparent;
      }
    }
  }

  :deep(.confirm-dialog) {
    h3 {
      font-size: 14px;

      .comple {
        color: #00c0c0;
      }

      .cancel {
        color: #f56c6c;
      }
    }

    .el-dialog__body {
      padding: 20px;
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .title {
      position: relative;
      padding: 10px 20px;
      border-radius: 2px;
      color: #808080;
      background-color: #eff3f7;

      &::before {
        position: absolute;
        content: '';
        left: 5px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-radius: 50%;
        background-color: #e69103;
      }
    }

    .list {
      .iconfont {
        font-size: 18px;
        margin-right: 5px;
        color: #00c0c0;
      }

      .num {
        color: #e69103;
      }
    }

    .card {
      .text {
        margin-bottom: 15px;
      }

      .notes {
        display: flex;

        .el-textarea__inner {
          height: 120px;
          border-radius: 2px;
        }
      }
    }

    .footer {
      margin-top: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn-save {
        border-color: #f56c6c;
        background-color: #f56c6c;
      }

      .bg-confirm {
        border-color: #00c0c0;
        background-color: #00c0c0;
      }

      .btn-cancel {
        color: #383838;
        border-color: #a6a6a6;
        background-color: transparent;
      }
    }
  }

  :deep(.repeat-dialog) {
    .repeat-table {
      :deep(.el-table__header) {
        th {
          .cell {
            display: flex;
          }
        }
      }

      .iconfont {
        margin-left: auto;
        font-size: 12px;
        cursor: pointer;
      }

      .number {
        color: #007cff;
        cursor: pointer;
      }

      .repeat {
        display: inline-block;
        font-size: 12px;
        line-height: 20px;
        padding: 0 4px;
        margin-left: 8px;
        border-radius: 2px;
        color: #fff;
        background: #f56c6c;
        cursor: pointer;
      }

      .reminder {
        display: inline-block;
        font-size: 12px;
        line-height: 20px;
        padding: 0 4px;
        margin-left: 8px;
        border-radius: 2px;
        color: #fff;
        background: #e69103;
      }

      .module {
        display: inline-block;
        font-size: 12px;
        line-height: 22px;
        padding: 0 6px;
        border-radius: 2px;
        color: #121315;
        background: #e6eaf0;
      }

      .status {
        display: inline-block;
        font-size: 12px;
        line-height: 22px;
        padding: 0 6px;
        border-radius: 2px;
      }

      .bg-status1 {
        color: #00c0c0;
        background: #e1f8f8;
      }

      .bg-status2 {
        color: #e69103;
        background: #fdf4de;
      }

      .bg-status3 {
        color: #007cff;
        background: #e6f1ff;
      }

      .bg-status4 {
        color: #f56c6c;
        background: #f5efef;
      }

      .select-work {
        display: inline-block;
        font-size: 12px;
        padding: 0 4px;
        border-radius: 2px;
        color: #ffffff;
        background-color: #00c0c0;
        cursor: pointer;
      }
    }
  }

  .height-28px {
    height: 28px;
  }

  .padding-lr-4 {
    padding: 0 4px;
  }

  .flex {
    display: flex;
  }

  .justify-center {
    justify-content: center;
  }

  .align-center {
    align-items: center;
  }

  .center {
    justify-content: center;
    align-items: center;
  }

  .font-12 {
    font-size: 12px;
  }

  .el-tag.el-tag--success {
    --el-tag-text-color: #00c0c0;
    --el-tag-bg-color: #ebf6f6;
    --el-tag-border-color: #ebf6f6;
    --el-tag-hover-color: #00c0c0;
  }

  .el-tag.el-tag--info {
    --el-tag-border-color: var(--el-color-info-light-9);
  }

  .el-tag {
    --el-tag-border-color: var(--el-color-primary-light-9);
  }

  .el-tag.el-tag--warning {
    --el-tag-border-color: var(--el-color-warning-light-9);
  }

  .table-column-for-set-width {
    min-width: fit-content !important;
    width: fit-content !important;
    height: auto !important;
    overflow: auto !important;
    white-space: nowrap !important;
    text-overflow: unset !important;
  }

  :deep(.el-table__cell) {
    .cell {
      white-space: nowrap;
    }
  }
</style>
